<template>
	<div>
		<!-- 基本信息 -->
		<div class="uiue-card" style="margin-top: 0">
			<div class="tit">基本信息</div>
			<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical" class="form-box"
				style="margin-top: 10px">
				<a-row :gutter="75">
					<a-col :span="8">
						<a-form-item label="应用名称" name="appName">
							<a-input v-model:value="formData.appName" placeholder="请输入应用名称" allow-clear />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="应用分类" name="appCategory">
							<a-select v-model:value="formData.appCategory" placeholder="选择应用分类"
								:options="tool.dictList('APP_CLASS')" allow-clear />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="应用范围" name="appRange">
							<a-select v-model:value="formData.appRange" placeholder="选择应用范围"
								:options="tool.dictList('app_range')" @change="handleRnChange" allow-clear />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="75">
					<a-col :span="8">
						<a-form-item label="项目经理" name="appContact">
							<!-- <a-input v-model:value="formData.appContact_s" placeholder="请输入应用联系人" allow-clear /> -->
							<a-select v-model:value="formData.appContact_s" placeholder="请选择" :options="personList"
								@change="appContactChange" allow-clear show-search :filter-option="filterOptionas"
								:field-names="{ label: 'name', value: 'id' }" />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="技术支持" name="versionNumber">
							<a-input v-model:value="formData.versionNumber" placeholder="姓名-手机号-邮箱" allow-clear />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="应用三级系统名" name="threeSystemName">
							<a-input v-model:value="formData.threeSystemName" placeholder="请输入应用三级系统名" allow-clear />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="75">
					<a-col :span="8">
						<a-form-item label="反馈接收人" name="operationsSupport">
							<a-input v-model:value="formData.operationsSupport" placeholder="姓名-手机号-联通邮箱" allow-clear />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="需求单编号" name="reqFormCode">
							<a-input v-model:value="formData.reqFormCode" placeholder="请输入需求单编号" allow-clear />
						</a-form-item>
					</a-col>
					<!-- <a-col :span="8">
						<a-form-item label="用户范围" name="appAccountid">
							<a-input v-model:value="formData.appAccountid" placeholder="请输入用户范围" allow-clear />
						</a-form-item>
					</a-col> -->
				</a-row>
				<a-row :gutter="75">
					<a-col :span="8">
						<a-form-item label="应用有效期" name="validTime">
							<a-date-picker style="width: 100%" v-model:value="formData.validTime"
								valueFormat="YYYY-MM-DD" :showToday="false" :disabled-date="disabledDate" />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="应用归属" name="platformBelongId">
							<a-select v-model:value="formData.platformBelongId" placeholder="选择应用归属"
								:options="appRangeLists" allow-clear show-search :filter-option="filterOption"
								:field-names="{ label: 'orgName', value: 'deptId' }" @change="handleChange" />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="移动端预计上线时间" name="appOnlineTime">
							<a-date-picker style="width: 100%" v-model:value="formData.appOnlineTime"
								valueFormat="YYYY-MM-DD" :showToday="false" :disabled-date="disabledDate" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="75">
					<a-col :span="8">
						<a-form-item label="双端接入" name="appAccess">
							<a-checkbox-group v-model:value="formData.appAccess" disabled>
								<a-checkbox v-for="item in lsArr" :key="item.logo" :value="item.value"
									:name="item.logo">{{
				item.label }}</a-checkbox>
								<!-- <a-checkbox value="2" name="yd">移动端</a-checkbox>
								<a-checkbox value="3" name="Android">安卓</a-checkbox>
								<a-checkbox value="4" name="ios">ios</a-checkbox>
								<a-checkbox value="5" name="umap">umap</a-checkbox> -->
							</a-checkbox-group>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="不接待办/待阅原因" name="noAccessTypeRemark">
							<a-select v-model:value="formData.noAccessTypeRemark" placeholder="请选择未双端接入原因"
								:options="tool.dictList('REASON_ACCESS')" allow-clear />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="未双端接入其他原因" name="appRemark">
							<a-textarea type="textarea" v-model:value="formData.appRemark" placeholder="请输入原因"
								allow-clear />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="75">
					<a-col :span="8" v-if="formData.appAccess.includes('1')">
						<a-form-item label="是否接门户端待办" name="isPcTodo" required>
							<a-radio-group v-model:value="formData.isPcTodo" :options="radioOption" />
						</a-form-item>
					</a-col>
					<a-col :span="8" v-if="formData.appAccess.includes('1')">
						<a-form-item label="是否接门户端待阅" name="isPcReadtodo" required>
							<a-radio-group v-model:value="formData.isPcReadtodo" :options="radioOption" />
						</a-form-item>
					</a-col>
					<a-col :span="8" v-if="appTodoShow">
						<a-form-item label="是否接移动端待办" name="isAppTodo" required>
							<a-radio-group v-model:value="formData.isAppTodo" :options="radioOption" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="75" v-if="appTodoShow">
					<a-col :span="8">
						<a-form-item label="是否接移动端待阅" name="isAppReadtodo" required>
							<a-radio-group v-model:value="formData.isAppReadtodo" :options="radioOption" />
						</a-form-item>
					</a-col>
					<!-- <a-col :span="8">
						<a-form-item label="不接待办/待阅原因" name="noAccessRemark">
							<a-textarea
								type="textarea"
								v-model:value="formData.noAccessRemark"
								placeholder="请输入原因"
								allow-clear
							/>
						</a-form-item>
					</a-col> -->
				</a-row>
				<a-row>
					<a-col :span="24">
						<a-form-item label="应用介绍" name="appDescription">
							<a-textarea :maxlength="200" type="textarea" v-model:value="formData.appDescription"
								:auto-size="{ minRows: 3, maxRows: 5 }" placeholder="请输入不超过200字以内的应用介绍" allow-clear />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="24">
						<a-form-item label="其他说明" name="otherInfo">
							<a-textarea :maxlength="200" type="textarea" v-model:value="formData.otherInfo"
								:auto-size="{ minRows: 3, maxRows: 5 }" placeholder="请输入不超过200字" allow-clear />
						</a-form-item>
					</a-col>
				</a-row>

				<a-row :gutter="75">
					<!-- <a-col :span="8">
						<a-form-item label="省分标识" name="mainSite" required>
							<a-input v-model:value="formData.mainSite" placeholder="请输入" allow-clear />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="组织ID" name="orgId">
							<a-input v-model:value="formData.orgId" placeholder="请输入组织ID" allow-clear />
						</a-form-item>
					</a-col> -->
					<a-col :span="8">
						<a-form-item label="appCode" name="appCode">
							<a-input v-model:value="formData.appCode" disabled placeholder="请输入" allow-clear />
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</div>

		<!-- 配置信息 -->
		<ConfigureForm v-if="showPz" ref="gure" :appAccess="formData.appAccess" @current="current" />

		<!-- 灰度名单 -->
		<grayList :configKey="configKey"></grayList>
		<!-- 附件 -->
		<!-- <annexForm ref="annex"></annexForm> -->
		<AnnexFormNew v-show="configKey === '1'" ref="annex" type="PC" />
		<AnnexFormNew v-show="configKey === '2'" ref="annex1" type="APP" />
	</div>
	<div class="uiue-card btn" :class="{ btnposi: activeIndex }">
		<a-button class="bt1" :loading="btnloding" @click="backs">取消</a-button>
		<a-button class="bt1" type="primary" :loading="btnloding" @click="submit('保存')">保存</a-button>
		<a-button type="primary" :loading="btnloding" @click="submit('提交')">提交</a-button>
	</div>
</template>

<script setup name="editForm">
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import appInfoApi from '@/api/biz/appInfoApi'
import fullApp from '@/api/fullApp/index'
import roleApi from '@/api/sys/roleApi'
import tool from '@/utils/tool'
// import annexForm from './form/annexForm.vue'
import grayList from './form/grayList.vue'
import dayjs from 'dayjs'
import ConfigureForm from './form/configure/index.vue'
import AnnexFormNew from './form/annexFormNew.vue'
import router from '@/router/index'
import sysConfig from '@/config/index'

const route = useRoute()
let showPz = ref(false)
const personList = ref([])
const appRangeLists = ref([])
const appRangeArr = ref([])
const annex = ref()
const annex1 = ref()
const gure = ref(null)
const formRef = ref()
// 双端接入
const appAccess = ref([])
const configKey = ref('1')
// 表单数据
const formData = ref({
	appName: '',
	appCategory: undefined,
	appRange: undefined,
	appKeywords: '',
	appContact_s: undefined,
	platformBelong: '',
	appAccountid: '',
	validTime: '',
	platformBelongId: undefined,
	appOnlineTime: '',
	mainSite: '',
	isPcTodo: '1',
	isPcReadtodo: '1',
	isAppTodo: '1',
	isAppReadtodo: '1',
	noAccessTypeRemark: undefined,
	noAccessRemark: '',
	appAccess: '',
	appDescription: '',
	apps: '1'
	// appStatus: '1'
})
onMounted(() => {
	getDetail()
	isPM()
	appInfoApiList()
})
let appTodoShow = ref(false)
const getDetail = () => {
	const { id = '' } = JSON.parse(route.query.data)
	fullApp.getDetail({ id }).then((res) => {
		formData.value = res
		if (res.appAccess.includes(',')) {
			appTodoShow.value = true
		} else {
			appTodoShow.value = res.appAccess != '1'
		}
		tool.session.set('editDateCL', JSON.stringify(formData.value))
		showPz.value = true
	})
}

const current = (index) => {
	configKey.value = index
}

// 默认要校验的
const formRules = reactive({
	appName: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
	appCategory: [{ required: true, message: '请输选择应用分类', trigger: 'blur' }],
	appRange: [{ required: true, message: '请选择应用范围', trigger: 'blur' }],
	// appCode: [{ required: true, message: '请输入应用ID', trigger: 'blur' }],
	appKeywords: [{ required: true, message: '请输入应用关键字', trigger: 'blur' }],
	// appStatus: [{ required: true, message: '请选择应用状态', trigger: 'blur' }],
	appContact_s: [{ required: true, message: '请输入应用联系人', trigger: 'blur' }],
	versionNumber: [{ required: true, message: '请输入技术支持', trigger: 'blur' }],
	operationsSupport: [{ required: true, message: '请输入反馈接收人', trigger: 'blur' }],
	// reqFormCode: [{ required: true, validator: validCode, trigger: 'blur' }],
	appAccountid: [{ required: true, message: '请输入用户范围', trigger: 'blur' }],
	validTime: [{ required: true, message: '请输入应用有效期', trigger: 'blur' }],
	appAccess: [{ required: true, message: '请选择双端接入', trigger: 'blur' }],
	appDescription: [{ required: true, message: '请输入应用介绍', trigger: 'blur' }],
	noAccessTypeRemark: '',
	platformBelongId: '',
	appOnlineTime: '',
	appRemark: ''
})
// 单选option
const radioOption = [
	{ label: '是', value: '1' },
	{ label: '否', value: '0' }
]
const statusData = [
	{ key: '0', name: '已临时下架' },
	{ key: '1', name: '已上线' },
	{ key: '2', name: '编辑中' },
	{ key: '3', name: '升级中' },
	{ key: '4', name: '下架中' },
	{ key: '5', name: '灰度发布' },
	{ key: '6', name: '取消灰度' },
	{ key: '7', name: '恢复上架中' },
	{ key: '8', name: '永久下架' }
]
const lsArr = [
	{ label: '门户端', value: '1', logo: 'pcLogo' },
	{ label: '移动端', value: '2', logo: 'appLogo' },
	{ label: 'Android', value: '3', logo: 'androidLogo' },
	{ label: 'IOS', value: '4', logo: 'iosLogo' },
	{ label: 'UMAP', value: '5', logo: 'umaoLogo' }
]

provide('statusData', statusData)
//详情接口 调用
// const detailDate = async () => {
// 	datas.value = await appInfoApi.appInfoDetail({ appId: route.query.appId })
// }

// detailDate()
const isgs = ref(false)
// 归属select变化 获取简称
const handleChange = (e) => {
	isgs.value = true
	if (e === '001000') {
		formData.value.mainSite = 'np'
	} else {
		const extJson = appRangeArr.value.find((v) => v.deptId === e)
		formData.value.mainSite = extJson.mainSite
	}
}
// 应用联系人变化事件
const appContactChange = (oid) => {
	if (oid) {
		let obj = personList.value.find((v) => v.id == oid)
		formData.value.appContact_s = `${obj.name} ${obj.phone || ''} ${obj.email || ''}`
		formData.value.appContact = oid
	}
}
//获取显示的应用联系人
const isPM = () => {
	appInfoApi.isPM().then((data) => {
		personList.value = data
		appContactChange(formData.value.appContact)
	})
}
const disabledDate = (current) => {
	// Can not select days before today and today
	return current && current < dayjs().endOf('day')
}
const arrListFilter = (v) => {
	if (v === '1') {
		//总部
		appRangeLists.value = appRangeArr.value.filter((item) => item.deptId == '001000')
	}
	if (v === '2') {
		//省分
		appRangeLists.value = appRangeArr.value.filter((item) => item.orgName.includes('分公司'))
	}
	if (v === '3') {
		//子公司
		appRangeLists.value = appRangeArr.value.filter(
			(item) => !item.orgName.includes('分公司') && item.deptId != '001000' && item.deptId != 'na'
		)
	}
	if (v === '4') {
		//全国
		appRangeLists.value = appRangeArr.value.filter((item) => item.deptId !== '001000')
	}
}

const filterOption = (input, option) => {
	return option.orgName.indexOf(input) >= 0;
}
const filterOptionas = (input, option) => {
	return option.name.indexOf(input) >= 0;
}

//应用归属
const appInfoApiList = async () => {
	// appInfoApi.queryAppRange().then((data) => {
	let arr = await roleApi.getPermissionsdl()
	let hqArr = arr.filter((v) => v.deptId === '001000')
	let allArr = arr.filter((v) => v.deptId !== '001000')
	allArr.sort((a, b) => a.deptId - b.deptId)
	const unicoms = sysConfig.UNICOM_APPRANG
	appRangeArr.value = [...unicoms, ...hqArr, ...allArr]
	arrListFilter(formData.value.appRange)
}
const handleRnChange = (v) => {
	formData.value.platformBelongId = null
	arrListFilter(v)
	// appRangeLists.value
}
const zhForm = ref({})

const submit = async (text) => {
	if (!isgs.value && formData.value.appAccess !== '1') {
		message.warning('请重新选择归属')
		return
	}
	if (!formData.value.reqFormCode) {
		message.warning('请填写需求单编号')
		return
	}
	if (formData.value.appAccess instanceof Array) {
		const str = formData.value.appAccess.join(',')
		formData.value.appAccess = str
	}
	if (formData.value.compatibility instanceof Array) {
		const str = formData.value.compatibility.join(',')
		formData.value.compatibility = str
	}
	const annexVali = await annex.value.handleValidate()
	const annexVali11 = await annex1.value.handleValidate()
	formData.value.appInfoPcPropertiesAddParam = { ...formData.value.appInfoPcPropertiesAddParam, ...annexVali }
	formData.value.appInfoAppPropertiesAddParam = { ...formData.value.appInfoAppPropertiesAddParam, ...annexVali11 }
	// const obj = {
	// 	planeFile: JSON.stringify(annexVali.planeFile), // 项目计划书
	// 	testResFile: JSON.stringify(annexVali.testResFile), // 测试环境结果
	// 	networkConnFile: JSON.stringify(annexVali.networkConnFile), // 网络打通结果
	// 	appStoreImgFile: JSON.stringify(annexVali.appStoreImgFile) // 应用商店截图
	// }

	if (formData.value.appAccess.includes('1')) {
		let obj1 = await gure.value.portalValidate()
		zhForm.value = { ...zhForm.value, ...obj1 }
	}
	if (formData.value.appAccess.includes('2')) {
		let obj1 = await gure.value.mobileValidate()
		zhForm.value = { ...zhForm.value, ...obj1 }
	}
	if (formData.value.appAccess.includes('3')) {
		let obj1 = await gure.value.androidValidate()
		zhForm.value = { ...zhForm.value, ...obj1 }
	}
	if (formData.value.appAccess.includes('4')) {
		let obj1 = await gure.value.iosValidate()
		zhForm.value = { ...zhForm.value, ...obj1 }
	}
	if (formData.value.appAccess.includes('5')) {
		let obj1 = await gure.value.umapValidate()
		zhForm.value = { ...zhForm.value, ...obj1 }
	}
	formData.value = { ...formData.value, ...zhForm.value }
	if (formData.value.compatibility && formData.value.compatibility instanceof Array) {
		formData.value.compatibility = formData.value.compatibility.join()
	}
	formData.value.technicalSupport = formData.value.platformBelongId
		? appRangeLists.value.find((v) => v.deptId === formData.value.platformBelongId).orgName
		: null
	console.log(formData.value)
	// 验证logo是否上传
	const appAccess = formData.value.appAccess.split(',')
	let bool = false
	appAccess.forEach(v => {
		const obj = lsArr.find(s => v !== '1' && s.value === v)
		if (obj) {
			if (!formData.value[obj.logo] || formData.value[obj.logo].includes('=DISPIMG')) {
				message.warning(`请上传${obj.label}Logo`)
				bool = true
			}
		}
	})
	if (bool) return false
	// 验证logo是否上传完成--
	const handel = text == '保存' ? await fullApp.edit(formData.value) : await fullApp.submits(formData.value)
	setTimeout(() => {
		router.back()
	}, 200)
}
</script>

<style lang="less" scoped>
.btn {
	text-align: right;

	.bt1 {
		margin-right: 10px;
	}
}

.btnposi {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
}
</style>
